<!--
 * @Description: 地图模式
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:10:09
 * @LastEditTime: 2021-09-28 10:40:49
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="map-box">
    <ul class="color-tag">
      <li>
        <i class="wgl"></i> 未关联
      </li>
      <li>
        <i class="ygl"></i> 已关联
      </li>
      <li>
        <i class="yz"></i> 严重告警
      </li>
      <li>
        <i class="zy"></i> 主要告警
      </li>
      <li>
        <i class="cy"></i> 次要告警
      </li>
      <li>
        <i class="jg"></i> 警告告警
      </li>
      <li>
        <label class="up"></label> 隧道UP
      </li>
      <li>
        <label class="down"></label> 隧道DOWN
      </li>
    </ul>
    <div id="mapChart" ref="mapChart"></div>
    <mark-dialog :dialogVisible="dialogVisible" :info="info" @changeDialog="changeDialog($event)" />
  </div>
</template>

<script>
import markDialog from '../markDialog';
export default {
  components: {
    markDialog
  },
  data () {
    return {
      mapChart: null,
      marks: [],
      line: [],
      point: [],
      info: {},
      dialogVisible: false,
      planePath: 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.siteAll();
    });
  },
  methods: {
    siteAll () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/ne/querySiteWithNe/' + _this.$store.state.user.user.info.dgId
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          // 站点标记
          // 未关联 - 蓝色  #3ed4ff
          // 已关联，无报错 - 绿色 #91cc75
          // 已关联，报错 -  报错级别色值 [严重 0 #de4040 主要 1 #de8f40 次要 2 #e9d426 警告 3 #86bcdb 无告警 -1 #91cc75]
          let siteMark = [];
          // 隧道线条
          // UP状态 - 绿色 #91cc75
          // DOWN状态 - 红色 #de4040
          let lines = [];
          let points = [];
          for (let i = 0; i < resultBody.length; i++) {
            siteMark.push({
              name: resultBody[i].sitename,
              value: [
                Number(resultBody[i].extAttrs.lng),
                Number(resultBody[i].extAttrs.lat),
                {
                  id: resultBody[i].id,
                  name: resultBody[i].sitename,
                  neId: resultBody[i].nes.length > 0 ? resultBody[i].nes[0].neId : -1,
                  nes: resultBody[i].extAttrs.neList
                }
              ],
              itemStyle: {
                normal: {
                  color: resultBody[i].nes.length > 0 ? this.filterColor(resultBody[i].extAttrs.neList[0].extAttrs.alarmSeverity) : '#3ed4ff'
                }
              }
            });
            if (resultBody[i].extAttrs.neList.length > 0) {
              if (resultBody[i].extAttrs.neList[0].extAttrs.links.length > 0) {
                let links = resultBody[i].extAttrs.neList[0].extAttrs.links;
                for (let j = 0; j < links.length; j++) {
                  lines.push({
                    fromName: links[j].extAttrs.startSite.sitename,
                    toName: links[j].extAttrs.endSite.sitename,
                    coords: [
                      [Number(links[j].extAttrs.startSite.extAttrs.lng), Number(links[j].extAttrs.startSite.extAttrs.lat)],
                      [Number(links[j].extAttrs.endSite.extAttrs.lng), Number(links[j].extAttrs.endSite.extAttrs.lat)]
                    ],
                    effect: {
                      color: links[j].state === 'CONNECTED' ? '#91cc75' : '#de4040'
                    }
                  });
                  points.push({
                    fromName: links[j].extAttrs.startSite.sitename,
                    toName: links[j].extAttrs.endSite.sitename,
                    coords: [
                      [Number(links[j].extAttrs.startSite.extAttrs.lng), Number(links[j].extAttrs.startSite.extAttrs.lat)],
                      [Number(links[j].extAttrs.endSite.extAttrs.lng), Number(links[j].extAttrs.endSite.extAttrs.lat)]
                    ],
                    lineStyle: {
                      normal: {
                        color: links[j].state === 'CONNECTED' ? '#91cc75' : '#de4040'
                      }
                    }
                  });
                }
              }
            }
          }
          this.marks = siteMark;
          this.line = lines;
          this.point = points;
          this.init();
        }
      });
    },
    // 过滤颜色显示
    filterColor (val) {
      switch (val) {
        case 0:
          val = '#de4040';
          break;
        case 1:
          val = '#de8f40';
          break;
        case 2:
          val = '#e9d426';
          break;
        case 3:
          val = '#86bcdb';
          break;
        default:
          val = '#91cc75';
      }
      return val;
    },
    init () {
      let _this = this;
      const option = {
        // 地图配置项
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              // 海洋
              {
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                  "color": "#044161"
                }
              },
              // 陆地
              {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                  "color": "#004981"
                }
              },
              // 边界
              {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                  "color": "#064f85"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#029fd4"
                }
              },
              // 铁路
              {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              // 公路
              {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#005b96",
                  "lightness": 1
                }
              },
              {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              // 主干道
              {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#00508b"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              // 地铁
              {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              // 建筑物
              {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                  "color": "#1a5787"
                }
              },
              // 关闭城市文字
              {
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                  "color": "#056197",
                  "visibility": "off"
                }
              }
            ]
          }
        },
        series: [
          {
            name: '站点',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            data: _this.marks,
            encode: {
              value: 2
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right'
            },
            itemStyle: {
              color: '#3ed4ff'
            },
            emphasis: {
              label: {
                color: '#ffffff',
                show: true
              }
            }
          },
          {
            name: '隧道',
            type: 'lines',
            zlevel: 1,
            coordinateSystem: 'bmap',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: '#3ed4ff',
                width: 0,
                curveness: 0.2
              }
            },
            data: _this.line
          },
          {
            name: '线路',
            type: 'lines',
            zlevel: 2,
            coordinateSystem: 'bmap',
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: _this.planePath,
              symbolSize: 15
            },
            lineStyle: {
              normal: {
                color: '#3ed4ff',
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: _this.point
          }
        ]
      };
      _this.mapChart = _this.$echarts.init(_this.$refs.mapChart);
      _this.mapChart.setOption(option);
      // 每个标识点的信息
      _this.mapChart.on('click', function(e) {
        if (e.value !== undefined && e.value.length > 0) {
          if (e.value[2].neId > 0) {
            _this.info = e.value[2];
            _this.dialogVisible = true;
          } else {
            _this.$message({
              type: 'warning',
              message: '该站点下未绑定网元，无法查看具体网元信息！'
            });
          }

        }
      });
    },
    // 弹出框，回调
    changeDialog (val) {
      let _this = this;
      _this.dialogVisible = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.map-box {
  background: #fff;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
  overflow: hidden;
  #mapChart {
    width: 100%;
    height: calc(100vh - 152px);
    overflow: hidden;
  }
  ::v-deep .anchorBL {
    display: none;
  }
}

.color-tag {
  display: inline-block;
  width: 100%;
  padding: 5px;
  padding-bottom: 0;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 99;
  li {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    color: #fff;
    &:last-child {
      margin-right: 0;
      &::after {
        content: "";
        overflow: hidden;
        clear: both;
      }
    }
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 3px;
      border-radius: 50%;
      position: relative;
      top: 1px;
      left: 0;
      background: #e8eaec;
    }
    // 未关联
    .wgl {
      background: #3ed4ff;
    }
    // 已关联
    .ygl {
      background: #91cc75;
    }
    // 严重告警
    .yz {
      background: #de4040;
    }
    // 主要告警
    .zy {
      background: #de8f40;
    }
    // 次要告警
    .cy {
      background: #e9d426;
    }
    // 警告告警
    .jg {
      background: #86bcdb;
    }
    label {
      display: inline-block;
      width: 10px;
      height: 3px;
      margin-right: 3px;
      border-radius: 2px;
      position: relative;
      top: -3px;
      left: 0;
    }
    // 隧道UP
    .up {
      background: #91cc75;
    }
    // 隧道DOWN
    .down {
      background: #de4040;
    }
  }
}
</style>